<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>

  <script src="./js/react.development.js"></script>
  <script src="./js/react-dom.development.js"></script>
  <script src="./js/babel.min.js"></script>
  <script type="text/babel">
    let isLoading = true

    /*
    效果1: 如果 isLoading 为真, 提示正在请求中, 否则 提示加载完成了
    * 情况1: 满足条件显示界面1, 否则显示界面2
     */
    let vDom
    /* 1. if...else */
    if (isLoading) {
      vDom = <h2>正在请求中...</h2>
    } else {
      vDom = <h2>加载完成了</h2>
    }
    /* 2. 三目表达式 */
    vDom = isLoading ? <h2>正在请求中2...</h2> : <h2>加载完成了2</h2>

    /* 
    效果2: 只有 isLoading为真时, 才提示正在请求中, 否则不做任何显示
    * 情况2: 满足条件才显示界面, 否则不做任何显示
    */
    // vDom = isLoading ? <h2>正在请求中3...</h2> : null   // 可以, 但不是最简洁的
    vDom = isLoading && <h2>正在请求中3...</h2>
    console.log(vDom)

    ReactDOM.render(vDom, document.getElementById('root'))

    /* 
    表达式1 && 表达式2
        如果表达式1对应的boolean为true, 结果就为表达式2的值
        如果表达式1对应的boolean为false, 结果就为表达式1的值

    表达式1 || 表达式1
        如果表达式1对应的boolean为true, 结果就是表达式1的值
        如果表达式1对应的boolean为false, 结果就为表达式2的值
    */
  </script>
</body>
</html>